<template>
  <div>
    <topBar/>
    <middle :show="false"/>
    <el-row>
      <el-col  :span="5"  :offset="5"><showImage/></el-col>
      <el-col :span="6"> <goods/></el-col>
    </el-row>
    <el-row class="tabs">
      <el-col  :span="11"  :offset="5">
    <el-tabs value="first">
      <el-tab-pane label="商品详情" name="first">商品详情</el-tab-pane>
      <el-tab-pane label="评论" name="second">评论</el-tab-pane>
    </el-tabs>
      </el-col>
    </el-row>
    <myfooter/>
  </div>
</template>

<script>

  import goods from '@/components/goods'
  import showImage from '@/components/showImage'
  import middle from '@/components/middle'
  import topBar from '@/components/topBar'
  import myfooter from '@/components/myfooter'
  export default {
    components:{goods,showImage,topBar,middle,myfooter},
    name: "index",
    data() {
      return {
        imgUrl: [
          { index:1, url: 'http://img.tea7.com/0093503_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:2, url: 'http://img.tea7.com/0093506_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:3, url: 'http://img.tea7.com/0093507_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:4, url: 'http://img.tea7.com/0093504_0.jpeg?x-oss-process=image/resize,w_500' },
          { index:5, url: 'http://img.tea7.com/0093505_0.jpeg?x-oss-process=image/resize,w_500' },
        ],
        //大图片默认显示第一张
        ImgUrl:'http://img.tea7.com/0093503_0.jpeg?x-oss-process=image/resize,w_500',
        index:1
      }
    }
    ,methods:{
      getIndex(imgUrl,i){
        this.ImgUrl = imgUrl;
        this.index=i
      }
    }
  }
</script>

<style scoped>
 .tabs{
   margin-top: 20px;
 }
.detail {
  border: 1px solid #dedede;
  border-top-color: #d5d5d5;
  /*background: url(../images/seemore-bg.png) right 0 repeat-y #fff;*/
  position: relative;
}
.item_cover {
  width: 410px;
  position: relative;
  float: left;
}
.little_img{
  width: 384px;
}
.little_img ul {
  padding: 15px 0;
  height: 56px;
  width: 0;
  overflow: hidden;
  margin: 0 auto;
  display:inline;
}
  .little_img li{
    display:inline;
    height: 50px;
    width: 50px;
    border: 1px solid ;
    margin: 0 4px 50px;
    cursor: pointer;
    padding: 2px;
    float: left;
    position: relative;
  }
.ss{
  border: 1px solid red;
}
</style>
